<template>
  <div>
    <my-header></my-header>
    <swiper
      class="swiper"
      ref="mySwiper"
      @mouseover.native="stopSwiper"
      @mouseout.native="startSwiper"
      :options="swiperOption"
    >
      <swiper-slide class="a1">
        <img src="/zooplay_img/042b2806811a186c7e0825b23bf57327.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="/zooplay_img/2f24b7b17b1ed1eacb7c485beb0b878b.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="/zooplay_img/48cc7d9aef57dd2f6a5880ee2519084c.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="/zooplay_img/5eb3ae1cecd38ce317c4ed930fce20d5.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="/zooplay_img/9d06c2a56156ea7c1aa15d9174f92787.jpg" alt="" />
      </swiper-slide>

      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      <div
        class="swiper-pagination pagination pagination-1"
        slot="pagination"
        style="bottom: 10%"
      >
        <span class="swiper-pagination-switch"></span
        ><span class="swiper-pagination-switch"></span
        ><span class="swiper-pagination-switch"></span
        ><span
          class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"
        ></span
        ><span class="swiper-pagination-switch"></span>
      </div>

      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    <div class="container_1">
      <div class="cont">
        <img src="../../public/zooplay_img/bor1.png" alt="" />
      </div>
      <div class="main">
        <div class="main_div1"></div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
  import MyHeader from "@/components/MyHeader.vue";
  import MyFooter from "@/components/MyFooter.vue";
  export default {
    components: {MyHeader, MyFooter},
    data() {
      return {
        now: 0,
        swiperOption: {
          effect: "slide",
          loop: true,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
          },
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        },
      };
    },

    methods: {
      stopSwiper() {
        this.$refs.mySwiper.$swiper.autoplay.stop();
      },
      startSwiper() {
        this.$refs.mySwiper.$swiper.autoplay.start();
      },
    },
  };
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
    text-decoration: none;
    outline-style: none;
  }
  .container_1 {
    position: relative;
    top: -14px;
    z-index: 33;
    margin: 0;
    padding: 0;
    background-image: url("../../public/zooplay_img/wen1.jpg");
  }

  .swiper {
    position: relative;
    top: -10px;
  }
  img {
    width: 100vw;
    height: 435px;
  }
  .swiper-container {
    width: 100;
    margin: 10px auto;
  }
  ::v-deep .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
  }
  .swiper-pagination {
    margin-bottom: 20px;
  }
  .swiper-button-next:hover {
    background-image: url("../../public/zooplay_img/arrRa.png");
  }
  .swiper-button-next {
    background-image: url("../../public/zooplay_img/arrR.png");
    width: 69px;
    height: 69px;
  }
  .swiper-button-next:after {
    opacity: 0;
  }
  .swiper-button-prev:hover {
    background-image: url("../../public/zooplay_img/arrLa.png");
  }
  .swiper-button-prev {
    opacity: 1;
    background-image: url("../../public/zooplay_img/arrL.png");
    width: 69px;
    height: 69px;
  }
  .swiper-button-prev:after {
    opacity: 0;
  }
  .swiper-pagination-bullet {
    display: inline-block;
    width: 300px;
  }
</style>
